<template>
  <el-form label-position="top">
    <el-form-item label="三、项目研究进度计划（按照季度编制）" />
  </el-form>
  <vxe-table
    ref="tableRef"
    border
    show-overflow
    :data="tableData"
    :column-config="{ resizable: true }"
    :edit-config="{ trigger: 'click', mode: 'row' }"
  >
    <vxe-column type="seq" width="60" />
    <vxe-column field="startDate" title="开始时间" :edit-render="{}">
      <template #edit="{ row }">
        <vxe-input
          v-model="row.startDate"
          type="date"
          placeholder="请选择日期"
          transfer
        />
      </template>
    </vxe-column>
    <vxe-column field="endDate" title="结束时间" :edit-render="{}">
      <template #edit="{ row }">
        <vxe-input
          v-model="row.endDate"
          type="date"
          placeholder="请选择日期"
          transfer
        />
      </template>
    </vxe-column>
    <vxe-column
      field="researchContent"
      title="研究内容"
      :edit-render="{ autofocus: '.vxe-input--inner' }"
    >
      <template #edit="{ row }">
        <vxe-input
          v-model="row.researchContent"
          type="text"
          placeholder="请输入研究内容"
        />
      </template>
    </vxe-column>
    <vxe-column field="stageObjectives" title="阶段目标" :edit-render="{}">
      <template #edit="{ row }">
        <vxe-input
          v-model="row.stageObjectives"
          type="text"
          placeholder="请输入阶段目标"
        />
      </template>
    </vxe-column>
    <vxe-column field="ownerId" title="负责人" :edit-render="{}">
      <template #default="{ row }">
        <span>{{ userFormat(row.ownerId) }}</span>
      </template>
      <template #edit="{ row }">
        <vxe-select v-model="row.ownerId" transfer>
          <vxe-option
            v-for="item in users"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          />
        </vxe-select>
      </template>
    </vxe-column>
    <vxe-column title="操作" width="80">
      <template #default="{ row }">
        <vxe-button mode="text" status="primary" @click="removeEvent(row)">
          移除
        </vxe-button>
      </template>
    </vxe-column>
  </vxe-table>
  <el-button
    style="margin-top: 20px"
    type="primary"
    :icon="Plus"
    @click="insertEvent"
  >
    增加计划
  </el-button>
</template>

<script setup>
  import { Plus } from '@element-plus/icons-vue'
  import { getAllUser } from '@/api/system/user'

  const $baseMessage = inject('$baseMessage')

  const users = ref([])

  const tableRef = ref()

  const tableData = ref([
    {
      startDate: '',
      endDate: '',
      researchContent: '',
      stageObjectives: '',
      ownerId: '',
    },
  ])

  const getUser = () => {
    getAllUser().then((res) => {
      if (res.code == 0 || res.code == 200) {
        users.value = res.data || []
      }
    })
  }

  const insertEvent = async () => {
    const $table = tableRef.value
    if ($table) {
      const record = {
        startDate: '',
        endDate: '',
        researchContent: '',
        stageObjectives: '',
        ownerId: '',
      }
      $table.insertAt(record, -1)
    }
  }

  const removeEvent = async (row) => {
    const $table = tableRef.value
    if ($table) {
      $table.remove(row)
    }
  }

  const getFormData = () => {
    const data = tableRef.value.getTableData().tableData
    if (!data.length) {
      $baseMessage('请填写完整的项目研究进度计划', 'error')
      return false
    }
    for (let i = 0; i < data.length; i++) {
      for (const key in data[i]) {
        if (!data[i][key] && !['ownerName'].includes(key)) {
          $baseMessage('请填写完整的项目研究进度计划', 'error')
          return false
        }
      }
    }
    return { schedulePlanInfo: data }
  }

  const userFormat = (id) => {
    const user = users.value.find((item) => item.id == id)
    if (user) return user.nickname
  }

  const setFormData = ({ schedulePlanInfo }) => {
    tableData.value = schedulePlanInfo || []
  }

  defineExpose({ getFormData, setFormData })

  getUser()
</script>

<style lang="scss" scoped></style>
